import React from 'react';

const WebGLFallback = ({ webglInfo }) => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      color: 'white',
      fontFamily: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
      textAlign: 'center',
      padding: '20px'
    }}>
      <div style={{
        background: 'rgba(255, 255, 255, 0.1)',
        backdropFilter: 'blur(10px)',
        borderRadius: '12px',
        padding: '40px',
        maxWidth: '600px',
        border: '1px solid rgba(255, 255, 255, 0.2)'
      }}>
        <div style={{ fontSize: '4em', marginBottom: '20px' }}>
          🚫
        </div>
        
        <h1 style={{ margin: '0 0 20px 0', fontSize: '2em' }}>
          WebGL Not Supported
        </h1>
        
        <p style={{ margin: '0 0 20px 0', fontSize: '1.1em', opacity: 0.9 }}>
          Your browser or device doesn't support WebGL, which is required for the 3D drone visualization.
        </p>
        
        <div style={{
          background: 'rgba(231, 76, 60, 0.2)',
          border: '1px solid rgba(231, 76, 60, 0.4)',
          borderRadius: '8px',
          padding: '15px',
          margin: '20px 0',
          textAlign: 'left'
        }}>
          <strong>Error Details:</strong>
          <br />
          <code style={{ fontSize: '0.9em', opacity: 0.8 }}>
            {webglInfo?.error || 'WebGL context could not be created'}
          </code>
        </div>

        <div style={{ 
          textAlign: 'left',
          background: 'rgba(52, 152, 219, 0.2)',
          border: '1px solid rgba(52, 152, 219, 0.4)',
          borderRadius: '8px',
          padding: '20px',
          margin: '20px 0'
        }}>
          <h3 style={{ margin: '0 0 15px 0', color: '#87CEEB' }}>
            💡 How to Fix This:
          </h3>
          <ul style={{ margin: 0, paddingLeft: '20px', lineHeight: '1.6' }}>
            <li><strong>Update your browser</strong> to the latest version</li>
            <li><strong>Enable hardware acceleration</strong> in browser settings</li>
            <li><strong>Update graphics drivers</strong> for your device</li>
            <li><strong>Try a different browser</strong> (Chrome, Firefox, Edge)</li>
            <li><strong>Check WebGL support</strong> at <a 
              href="https://webglreport.com" 
              target="_blank" 
              rel="noopener noreferrer"
              style={{ color: '#87CEEB' }}
            >
              webglreport.com
            </a></li>
          </ul>
        </div>

        <div style={{
          display: 'flex',
          gap: '15px',
          justifyContent: 'center',
          flexWrap: 'wrap',
          marginTop: '30px'
        }}>
          <button
            onClick={() => window.location.reload()}
            style={{
              background: 'linear-gradient(135deg, #3498db, #2980b9)',
              color: 'white',
              border: 'none',
              borderRadius: '8px',
              padding: '12px 24px',
              fontSize: '1em',
              cursor: 'pointer',
              transition: 'all 0.3s ease'
            }}
            onMouseOver={(e) => {
              e.target.style.transform = 'translateY(-2px)';
              e.target.style.boxShadow = '0 4px 12px rgba(52, 152, 219, 0.3)';
            }}
            onMouseOut={(e) => {
              e.target.style.transform = 'translateY(0)';
              e.target.style.boxShadow = 'none';
            }}
          >
            🔄 Try Again
          </button>
          
          <a
            href="https://webglreport.com"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              background: 'linear-gradient(135deg, #27ae60, #2ecc71)',
              color: 'white',
              border: 'none',
              borderRadius: '8px',
              padding: '12px 24px',
              fontSize: '1em',
              textDecoration: 'none',
              display: 'inline-block',
              transition: 'all 0.3s ease'
            }}
            onMouseOver={(e) => {
              e.target.style.transform = 'translateY(-2px)';
              e.target.style.boxShadow = '0 4px 12px rgba(39, 174, 96, 0.3)';
            }}
            onMouseOut={(e) => {
              e.target.style.transform = 'translateY(0)';
              e.target.style.boxShadow = 'none';
            }}
          >
            🔍 Check WebGL Support
          </a>
        </div>

        <div style={{ 
          marginTop: '30px', 
          fontSize: '0.8em', 
          opacity: 0.6,
          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
          paddingTop: '20px'
        }}>
          <p>
            <strong>Alternative:</strong> You can still use the control panel features, 
            but the 3D visualization will not be available.
          </p>
        </div>
      </div>
    </div>
  );
};

export default WebGLFallback;
